<!-- 医院管理 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-hdbg">
      <el-form ref="form" :model="formData" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="83px">
        <el-form-item label="省份:" prop="hospitalCode">
          <el-select size="small" class="param-type_input" v-model="formData.provincesCode" placeholder="请选择">
            <el-option
              v-for="(item,index) in provincesOptions"
              :key="index"
              :label="item.hospitalName"
              :value="item.hospitalCode"
              @change="handleChange('hospital')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="city">
          <el-select size="small" class="param-type_input" v-model="formData.city" multiple placeholder="请选择" clearable collapse-tags @change="handleChange('depArea')">
            <el-option
              v-for="(item,index) in cityOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="县区:" prop="county" class="short-input">
          <el-select size="small" class="param-type_input" v-model="formData.county" multiple placeholder="请选择" clearable collapse-tags @change="handleChange('department')">
            <el-option
              v-for="(item,index) in countyOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="医院名称:">
          <el-input v-model="formData.hospitalName" placeholder="请输入医院名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="m-l-0 click-button" size="small" @click="resetParam" plain>重置</el-button>
          <el-button type="primary" class="m-l-0 click-button" size="small" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <div class="content-title">
        <span>医院列表</span>
        <el-button class="add-button" v-if="$store.state.app.permission" type="primary" size="small" @click="getRightPanel(pageStatus.add)"><i class="el-icon-plus icon"></i>新增医院</el-button>
      </div>
      <el-table
        ref="table"
        v-loading="loading"
        size="medium"
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="left" prop="hospitalName" label="医院名称"></el-table-column>
        <el-table-column align="left" prop="hospitalCode" label="医院代码"></el-table-column>
        <el-table-column align="left" prop="area" label="地区"></el-table-column>
        <el-table-column align="left" prop="hospitalState" label="医院状态">
          <template slot-scope="scope">
            <span :class="scope.row.hospitalState==='关闭' ? 'warning-color':''">
              {{scope.row.hospitalState}}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="audit" label="是否审核"></el-table-column>
        <el-table-column align="left" prop="createTime" label="添加时间"></el-table-column>
        <el-table-column align="left" prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column align="left" label="操作" width="256">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="getRightPanel(pageStatus.edit,scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i>删除</el-button>
            <el-button :type="scope.row.hospitalState==='正常' ? 'warning':'success'" size="small" @click="handleLock(scope.row)"><i :class="scope.row.hospitalState==='正常' ? 'el-icon-lock':'el-icon-unlock'"></i>{{scope.row.hospitalState==='正常' ? '关闭' : '打开'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paginationCont
        :total="totalCount"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        @pagination="changePagination"
      />
    </el-card>
    <transition name="fade-form" mode="out-in">
      <div :class="{'toolBox-small':device !== 'mobile' && sidebar.opened,'toolBox-midul': device !== 'mobile' && !sidebar.opened,'toolBox-large':device == 'mobile','toolBox':true}" v-show="showToolBox">
        <div>
          <i class="el-icon-info icon blue-color"></i>
          <span class="toolBox-text">已选择<span class="blue-color">{{multipleSelection.length}}</span>项</span>
          <span class="cancle-click" @click="cancleChoose">取消选择</span>
        </div>
        <div>
          <el-button type="warning" size="small" :disabled="!(qiyongFlag&&!jingyongFlag)" @click="batchSetStatus">批量关闭</el-button>
          <el-button type="success" plain size="small" :disabled="!(!qiyongFlag&&jingyongFlag)" @click="batchSetStatus">批量打开</el-button>
        </div>
      </div>
    </transition>
    <editRoom :show-right.sync="showRight" :cur-status="curStatus" :row-data.sync="rowData" @refresh="search"></editRoom>
  </div>
</template>

<script>
import { getDepAreaList, getDepList, getModalityList, getCheckRoomList, getItemList, getCheckroomPages, deleteCheckroom } from '@/api/api.js'
import paginationCont from '@/components/Pagination/index'
import { PageStatus } from '@/utils/constant'
import { roomStatusFlr } from '@/utils/validate'
import editRoom from './editRoom'
export default {
  name: '',
  mixins: [],
  components: { paginationCont, editRoom },
  filters: {
    roomStatusFlr
  },
  data() {
    return {
      pageStatus: PageStatus,
      formData: {
        hospitalName: '',
        provincesCode: [],
        city: [],
        county: []
      },
      provincesOptions: [],
      cityOptions: [],
      countyOptions: [],
      tableData: [
        {
          hospitalName: '温州医科大学附属第一医院',
          hospitalCode: 'WY000001',
          area: '浙江省温州市鹿城区',
          hospitalState: '正常',
          audit: '已审核',
          createTime: '2021/5/12 12:00:00',
          updateTime: '2021/5/12 12:00:00'
        },
        {
          hospitalName: '温州医科大学附属第一医院',
          hospitalCode: 'WY000001',
          area: '浙江省温州市鹿城区',
          hospitalState: '正常',
          audit: '已审核',
          createTime: '2021/5/12 12:00:00',
          updateTime: '2021/5/12 12:00:00'
        },
        {
          hospitalName: '温州医科大学附属第一医院',
          hospitalCode: 'WY000001',
          area: '浙江省温州市鹿城区',
          hospitalState: '关闭',
          audit: '已审核',
          createTime: '2021/5/12 12:00:00',
          updateTime: '2021/5/12 12:00:00'
        }
      ],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      loading: false,
      multipleSelection: [],
      showToolBox: false,
      qiyongFlag: false,
      jingyongFlag: false,
      showRight: false,
      curStatus: '',
      rowData: {}
    }
  },
  watch: {
    multipleSelection(val) {
      if (val && val.length > 1) {
        this.showToolBox = true
        this.qiyongFlag = false
        this.jingyongFlag = false
        val.forEach(el => {
          if (el.hospitalState === '正常') {
            this.qiyongFlag = true
          } else {
            this.jingyongFlag = true
          }
        })
      } else {
        this.showToolBox = false
      }
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    }
  },
  created() {

  },
  mounted() {
    // this.$getHospitalList()
    this.formData.hospitalCode = this.$store.state.user.hospitalCode
    this.getDepAreaOptions()
    this.getDepartment()
    this.getDepOptions()
    this.getModalityOptions()
    this.getCheckRoomOptions()
    this.search()
  },
  methods: {
    resetParam() {
      // 重置
      this.formData = {
        hospitalName: '',
        provincesCode: [],
        city: [],
        county: []
      }
    //   this.search()
    },
    search() {
      // 查询
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentPage = 1
        //   this.fetchData()
        }
      })
    },
    changePagination() {
      this.$refs.form.validate((valid) => {
        if (valid) {
        //   this.fetchData()
        }
      })
    },
    fetchData() {
      this.loading = true
      let data = {
        ...this.formData,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(','),
        modality: this.formData.modality.join(','),
        checkRoom: this.formData.checkRoom.join(','),
        pageSize: this.pageSize, // 页面大小
        pageNumber: this.currentPage // 页码
      }
      getCheckroomPages(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getDepAreaOptions() {
      getDepAreaList({ hospitalCode: this.formData.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.depAreaOptions = res.content.list
        }
      })
    },
    getDepOptions() {
      getDepList({ hospitalCode: this.formData.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.depOptions = res.content.list
        }
      })
    },
    getModalityOptions() {
      getModalityList({ hospitalCode: this.formData.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.modalityOptions = res.content.list
        }
      })
    },
    getCheckRoomOptions() {
      getCheckRoomList({ hospitalCode: this.formData.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.checkRoomOptions = res.content.list
        }
      })
    },
    getDepartment() {
      let data = {
        HospitalCode: this.formData.hospitalCode,
        DepArea: this.formData.depArea.join(','),
        type: '科室'
      }
      getItemList(data).then(res => {
        if (res && res.code === 10000) {
          this.departmentOptions = res.content.list.map(_item => _item.item)
        }
      })
    },
    // 获取右边form
    getRightPanel(status, params) {
      /* this.showRight = true
      this.curStatus = status
      if (params) {
        this.rowData = params
      } else {
        this.rowData = null
      } */
    },
    handleDelete(i, row) {
      /* this.$confirm('此操作将永久删除该机房, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData(row)
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }) */
    },
    deleteData(row) {
      deleteCheckroom({ id: row.id }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.changePagination()
        }
      })
    },
    handleLock(row) {
      /* let tip = row.hospitalState === '正常' ? '关闭' : '打开'
      this.$confirm(`此操作将${tip}该机房, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.lockData(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      }) */
    },
    lockData(row) {
      /* let status = row.hospitalState === '正常' ? '关闭' : '正常'
      updatehospitalState({ id: row.id, hospitalState: status }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('状态更新成功')
          this.changePagination()
        }
      }) */
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cancleChoose() {
      // 取消选择
      this.multipleSelection = []
      this.$refs.table.clearSelection()
    },
    batchSetStatus() {
      // 批量禁用
      /* let tip = this.multipleSelection[0].hospitalState === '正常' ? '关闭' : '打开'
      this.$confirm(`此操作将批量${tip}机房, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let successNum = 0
        let faliNum = 0
        for (let v of this.multipleSelection) {
          let data = {
            id: v.id,
            hospitalState: v.hospitalState === '正常' ? '关闭' : '正常'
          }
          await updatehospitalState(data).then(res => {
            // 改掉列表的数据
            if (res && res.code === 10000) {
              successNum++
            } else {
              faliNum++
            }
          })
        }
        this.changePagination()
        this.$message.success(`已经成功${tip}` + successNum + '条,失败' + faliNum + '条')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      }) */
    },
    handleChange(val) {
      switch (val) {
        case 'hospital':
          this.getDepAreaOptions()
          this.getDepartment()
          this.getDepOptions()
          this.getModalityOptions()
          this.formData.depArea = ''
          this.formData.department = ''
          this.formData.dep = ''
          this.formData.modality = ''
          break
        case 'depArea':
          this.getDepartment()
          this.getDepOptions()
          this.getModalityOptions()
          this.formData.department = ''
          this.formData.dep = ''
          this.formData.modality = ''
          break
        case 'department':
          this.getDepOptions()
          this.getModalityOptions()
          this.formData.dep = ''
          this.formData.modality = ''
          break
        case 'dep':
          this.getModalityOptions()
          this.formData.modality = ''
          break
        default:
          break
      }
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.ky-container{
    .content-title{
        margin-bottom: 10px;
        span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
        }
        .add-button{
            width: 96px;
            height: 32px;
            margin-left: 16px;
        }
    }
    .warning-color{
        color:#ff7600;
    }
    .toolBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #E5E7EC;
        padding: 12px 28px;
        position: fixed;
        bottom: 0;
        background: #fff;
        z-index: 10;
        margin-left: -20px;
        .toolBox-text{
            margin-left: 8px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            span{
                margin:0 4px;
            }
        }
        .cancle-click{
            cursor: pointer;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #919398;
            margin-left: 32px;
        }
  }
  .toolBox-small{
      width: calc(100% - 210px);
  }
  .toolBox-midul{
      width: calc(100% - 54px);
  }
  .toolBox-large{
      width: 100%
  }
}
</style>
